<template>
  <div class="drgCase">
    <c-navigation>
      <c-time @change="timeChangeHandler"/>
    </c-navigation>
    <div class="drgCaseMain">
      <div class="middleNum">
        <div class="numOne">
          <div>
            <div class="pMain">
              <p class="pNum" :style="diseaseFeeData.disFee>0?'':'color:#E00703'">
                {{ diseaseFeeData.disFee }}<span> 万元</span></p>
              <p class="pTitle">总结余</p>
            </div>
          </div>
          <div>
            <div class="pMain">
              <p class="pNum">{{ diseaseFeeData.money }}<span> 万元</span></p>
              <p class="pTitle">医疗总费用</p>
            </div>
          </div>
          <div>
            <div class="pMain">
              <p class="pNum">{{ diseaseFeeData.setmoney }}<span> 万元</span></p>
              <p class="pTitle">结算费用</p>
            </div>
          </div>
        </div>
        <div class="numTwo">
          <div>
            <div class="pMain">
              <p class="pNum">{{ diseaseGroupResultData.disCount }}</p>
              <p class="pTitle" style="text-indent: 2px;">DIP病例数</p>
            </div>
          </div>
          <div>
            <div class="pMain">
              <p class="pNum">{{ diseaseGroupResultData.disNotGroupCount }}</p>
              <p class="pTitle">无分组结果病例数</p>
            </div>
          </div>
          <div>
            <div class="pMain">
              <p class="pNum">{{ diseaseGroupResultData.allpoint }}<span> 点</span></p>
              <p class="pTitle">总点数</p>
            </div>
          </div>
        </div>
        <div class="numThree">
          <div>
            <div class="pMain">
              <p class="pNum">{{ diseaseHighLowCountData.disHighCount }}</p>
              <p class="pTitle" style="text-indent: 2px;">高倍率病例数</p>
              <p class="ratiop">
                占比{{ diseaseHighLowCountData.disHighCount == 0 ? 0 : ((diseaseHighLowCountData.disHighCount + diseaseHighLowCountData.disLowCount) / diseaseHighLowCountData.disHighCount) * 100 | filterFixed }}%</p>
            </div>
          </div>
          <div>
            <div class="pMain">
              <p class="pNum">{{ diseaseHighLowCountData.disLowCount }}</p>
              <p class="pTitle">低倍率病例数</p>
              <p class="ratiop">
                占比{{ diseaseHighLowCountData.disLowCount == 0 ? 0 : ((diseaseHighLowCountData.disHighCount + diseaseHighLowCountData.disLowCount) / diseaseHighLowCountData.disLowCount) * 100 | filterFixed }}%</p>
            </div>
          </div>
        </div>
      </div>
      <div class="tableChoose">
        <div :class="['leftChoose',imgDeg==0?'':'leftChooseMore']">

          <span>科室</span>
          <a-select @change="surplusselectChange" v-model="depCode" class="tableSelect" size="small">
            <img src="@/assets/images/icon/arrow.png" class="arrowIcon" slot="suffixIcon"/>
            <a-select-option v-for="d in keshidata" :value="d.value">
              {{ d.label }}
            </a-select-option>
          </a-select>
          <span>医疗组</span>
          <a-select @change="groupselectChange" v-model="groupCode" class="tableSelect" size="small">
            <img src="@/assets/images/icon/arrow.png" class="arrowIcon" slot="suffixIcon"/>
            <a-select-option v-for="d in groupdata" :value="d.value">
              {{ d.label }}
            </a-select-option>
          </a-select>

          <span>疾病类型</span>
          <a-select @change="illnessTypeselectChange" v-model="diseaseType" class="tableSelect" size="small">
            <img src="@/assets/images/icon/arrow.png" class="arrowIcon" slot="suffixIcon"/>
            <a-select-option value="高倍率病例">
              高倍率病例
            </a-select-option>
            <a-select-option value="低倍率病例">
              低倍率病例
            </a-select-option>
          </a-select>
          <a-input v-model="querystr" placeholder="按姓名、住院号、病案号、手术、诊断搜索" size="small" class="tableInput"/>
          <span class="more">更多筛选<img src="@/assets/images/icon/arrow.png" alt=""
                                      :style="{transform: 'rotateZ('+imgDeg+'deg)'}" @click="showMore"
                                      class="arrowIcon"></span>
          <p>
            <span>病组</span>
            <a-select @change="illnessGroupSelectChange" v-model="diseaseCode" class="tableSelect" size="small">
              <img src="@/assets/images/icon/arrow.png" class="arrowIcon" slot="suffixIcon"/>
              <a-select-option v-for="d in illnessData" :value="d.value">
                {{ d.label }}
              </a-select-option>
            </a-select>
            <span>统筹区</span>
            <a-select class="tableSelect" size="small">
              <img src="@/assets/images/icon/arrow.png" class="arrowIcon" slot="suffixIcon"/>
              <a-select-option value="jack">
                Jack
              </a-select-option>
            </a-select>
          </p>
        </div>
        <div class="tableButton">
          <a-button class="reBack" @click="reBack">
            重置
          </a-button>
          <a-button type="primary" @click="listSearch">
            搜索
          </a-button>
        </div>
      </div>
      <a-table
          :columns="columns"
          class="custom"
          :data-source="drgData"
          :pagination="{total:total,pageSize:pageSize}"
          @change="tableChange"
          :scroll="{ x: '1623px'}"
          :rowKey="`${Math.random()}`">
      </a-table>
    </div>
  </div>
</template>

<script>
import {getDiseaseGroupResult, getDiseaseFee, list, getDiseaseHighLowCount} from "@/api/diseaseAnalyse";
import {getDeptList, getDoctorGroupList, getDiseaseList} from '@/api/common';
import columns from "./columns.js";
import moment from "moment";

export default {
  name: "drgCase",
  components: {},
  data() {
    return {
      drgData: [],
      columns: [],
      timeParams: {
        year: moment().format('YYYY'),
        month: moment().format('MM')
      },
      imgDeg: 0,
      diseaseFeeData: {
        disFee: '--',
        money: '--',
        setmoney: '--',
      },
      diseaseGroupResultData: {
        disCount: '--',
        disNotGroupCount: '--',
        allpoint: '--',
      },
      diseaseHighLowCountData: {
        disHighCount: '--',
        disLowCount: '--',
      },
      keshidata: [],
      groupdata: [],
      illnessData: [],
      depCode: null,
      groupCode: null,
      diseaseType: null,
      querystr: null,
      diseaseCode: null,
      total: 1,
      pageSize: 7,
      pageNum: 1,
    }
  },
  created() {
    this.columns = columns
    this.surplusHandleSearch()
    this.doctorGroupHandleSearch()
    this.illnessHandleSearch()
  },
  mounted() {

  },
  filters: {
    filterFixed(msg) {
      return msg.toFixed(2)
    }
  },
  methods: {
    async getDiseaseFee() {
      const params = {...this.timeParams};
      const res = await getDiseaseFee(params);
      if (res['data']) {
        this.diseaseFeeData = res['data']
      }
    },
    async getDiseaseGroupResult() {
      const params = {...this.timeParams};
      const res = await getDiseaseGroupResult(params);
      if (res['data']) {
        this.diseaseGroupResultData = res['data']
      }
    },
    async getDiseaseHighLowCount() {
      const params = {...this.timeParams};
      const res = await getDiseaseHighLowCount(params);
      if (res['data']) {
        this.diseaseHighLowCountData = res['data']
      }
    },
    async getList() {
      console.log(this.depCode)
      const params = {
        depCode: this.depCode,
        groupCode: this.groupCode,
        diseaseType: this.diseaseType,
        endFee: null,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        querystr: this.querystr,
        startFee: null, ...this.timeParams
      }
      const res = await list(params);
      if (res['data']) {
        console.log(res['data'])
        this.total = res['data'].total
        this.drgData = res['data']['list']
      }
    },
    async surplusHandleSearch() {
      const res = await getDeptList();
      if (res['data']) {
        this.keshidata = res.data.map((item) => {
          return {label: item.depName, value: item.depCode}
        })
        console.log(this.keshidata)
      }
    },
    async doctorGroupHandleSearch() {
      const res = await getDoctorGroupList();
      if (res['data']) {
        this.groupdata = res.data.map((item) => {
          return {label: item.groupname, value: item.groupcode}
        })
        console.log(this.groupdata)
      }
    },
    async illnessHandleSearch() {
      const res = await getDiseaseList();
      if (res['data']) {
        this.illnessData = res.data.map((item) => {
          return {label: item.diseaseName, value: item.diseaseCode}
        })
        console.log(this.illnessData)
      }
    },

    surplusselectChange(value) {
      console.log(value)
      this.depCode = value
    },
    groupselectChange(value) {
      console.log(value)
      this.groupCode = value
    },
    illnessTypeselectChange(value) {
      this.diseaseType = value
    },
    illnessGroupSelectChange(value) {
      this.diseaseCode = value
    },
    timeChangeHandler(e) {
      this.timeParams = e
      this.getDiseaseFee()
      this.getDiseaseGroupResult()
      this.getDiseaseHighLowCount()
      this.getList()
    },
    listSearch() {
      this.getList()
    },
    reBack() {
      this.depCode = null
      this.groupCode = null
      this.diseaseType = null
      this.querystr = null
    },
    showMore() {
      this.imgDeg = this.imgDeg == 0 ? 180 : 0
    },
    tableChange(e) {
      this.pageNum = e.current;
      this.getList();
    },
  }

}
</script>

<style lang="stylus" scoped>
.drgCaseMain {
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 4px 8px 0 rgba(25, 25, 26, 0.15), 0 2px 4px 0 rgba(39, 39, 42, 0.20);
  border-radius: 12px;
  margin-top 20px;
}

.seeDetail {
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #4B82FB;
  text-align: right;
  float right
}

.middleNum {
  margin-top: 20px;
  margin-bottom 40px;
  display flex;
  height: 120px;
  color: #484D78;
}

.middleNum > div {
  background: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(39, 39, 42, 0.20);
  border-radius: 8px;
  display flex;
}

.middleNum .numOne {
  flex: 1 1 620px;
}

.middleNum .numTwo {
  flex: 1 1 520px;
  margin: 0 20px;
}

.middleNum .numThree {
  flex: 1 1 460px;
}

.middleNum > div > div {
  flex: 1 1 33%;
  text-align center;
}

.pMain {
  display: inline-block;
  text-align left;
  padding-top: 33px;
}

.pNum {
  font-size: 28px;
  line-height: 28px;
}

.pNum span {
  font-size: 14px;
  line-height: 14px;
}

.pTitle {
  font-size: 14px;
  line-height: 14px;
  margin-top 6px;
}

.ratiop {
  font-size: 14px;
  color: #9295AF;
  line-height: 14px;
  margin-top 6px;
}

.tableChoose {
  margin-top: 41px;
  position relative
}

.leftChoose {
  height: 36px;
  overflow hidden;
  transition 0.5s;
}

.leftChooseMore {
  height: 72px;
}

.leftChoose span {
  display inline-block;
  vertical-align top;
  line-height: 24px;
  margin-right 10px;
}

.tableSelect {
  width: 160px;
  margin-right 20px;
  margin-bottom 12px
}

.tableInput {
  width: 300px;
  display inline-block;
  vertical-align top;
  font-size: 12px;
  color: #484D78;
}

.more {
  display inline-block;
  vertical-align top;
  font-size: 12px;
  color: #6190F7;
  line-height: 12px;
  margin-left 20px;
}

.arrowIcon {
  width: 14px;
  height: 14px;
  display inline-block;
  vertical-align middle;
  cursor pointe;
  transition 0.5s;
}

.tableButton {
  position: absolute;
  right: 0;
  top: 0;
  display inline-block;
}

.tableButton >>> .ant-btn {
  width: 80px;
  margin-left 10px;
  height: 24px;
  line-height 22px;
  font-size: 12px;
}

.reBack {
  background: #F7FAFF;
  border: 1px solid #548AFF;
  border-radius: 8px;
  border-radius: 8px;
  color: #2C7BFF;
}

.ant-input {
  border: 1px solid #D8DCF7;
  border-radius: 8px;
}

.ant-select-open .arrowIcon {
  transform: rotate(180deg)
}

>>> .ant-select {
  font-size: 12px;
}
</style>
